<template>
<div  :style="{minHeight: height + 'px'}" v-loading="model.loading" class="pb-5">
  <el-header class="ec-list-header">
    <div class="ec-list-search">
      <el-input placeholder="请输入企业名称" v-model="keywords" class="input-with-select" @keyup.enter.native="newSearch()">
        <el-button slot="append" icon="el-icon-search" @click="newSearch()"></el-button>
      </el-input>
    </div>
  </el-header>
  <div class="ec-list-list">
    <el-row :gutter="20">
      <h2 v-if="this.model.rows.length === 0" class="text-center">没有相关企业</h2>
      <el-col :span="6" class="my-2" v-for="(item, index) in this.model.rows" :key="index">
        <ec-card :info="item"></ec-card>
      </el-col>
    </el-row>
  </div>
  <back-top></back-top>
  <!-- <div class="text-center my-5">
    <el-button type="success" class="width-200" style="margin-top: 20px;" plain round @click="model.addLoad()" v-show="model.hasMore">查看更多</el-button>
  </div> -->
</div>
</template>

<script>
import PagedList from '../../libs/PagedList'
import EcCard from './EcCard'
import $ from 'jquery'

export default {
  title: '企业列表',
  name: 'ec-list',
  data() {
    return {
      model: new PagedList('/mscs/home/findEnterpriseBasic', 16),
      keywords: ''
    }
  },
  mounted() {
    this.newSearch()
  },
  methods: {
    newSearch() {
      this.model.search({search: this.keywords})
    },
    loadMore () {
      if (!this.model.hasMore || this.model.loading) {
        return
      }
      let isLoad = (document.documentElement.scrollHeight - document.documentElement.scrollTop-document.documentElement.clientHeight) <= 800
      if (isLoad) {
        this.model.addLoad()
      }
    }
  },
  computed: {
    height() {
      return this.$store.state.height.client - this.$store.state.height.header - this.$store.state.height.footer
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      $(window).scroll(vm.loadMore)
    })
  },
  beforeRouteLeave (to, from, next) {
    $(window).unbind('scroll', this.loadMore)
    next()
  },
  components: {
    'ec-card': EcCard
  }
}
</script>
<style lang="scss">
.ec-list-header {
    height: 130px!important;
    background-color: #edefea;
    margin-bottom: 20px;
    padding-top: 45px!important;
    > .ec-list-search {
        margin-left: 50%;
        transform: translateX(-50%);
        width: 1260px;
    }
}
.ec-list-list {
  width: 1260px;
  margin: 0 auto;
}
</style>
